import React, { useCallback } from "react";
import styles from "./index.module.scss";
import useMoveFu from "./moveUse";

function A8move() {
  const { touchstart, touchmove, touchend, isPcMoveFlag } = useMoveFu();

  const onSwipeChange = useCallback((val: number) => {
    console.log(val === 1 ? "右滑动" : "左滑动");
  }, []);

  // 点击事件
  const clickFu = useCallback(() => {
    if (isPcMoveFlag) {
      console.log("点了阿！！！！！！艹");
    }
  }, [isPcMoveFlag]);

  return (
    <div className={styles.A8move}>
      <div
        className="A8box"
        onTouchStart={(e) => touchstart(e.touches[0].pageX)}
        onTouchMove={(e) => touchmove(e.touches[0].pageX)}
        onTouchEnd={() => touchend((val) => onSwipeChange(val), "mobile")}
        onClick={() => clickFu()}
        onMouseDown={(e) => touchstart(e.pageX)}
        onMouseMove={(e) => touchmove(e.pageX)}
        onMouseUp={() => touchend((val) => onSwipeChange(val), "pc")}
      ></div>
    </div>
  );
}

const MemoA8move = React.memo(A8move);

export default MemoA8move;
